<template>
  <!--首页混合小图表，显示地图选择泳池数据-->
  <div :id="'mix-chart' + id" style="width: 100%; height: 30vh; margin: 0 auto;"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "MixLittleChart",
  props: ['poolInfoData', 'id'],
  computed: {
    poolData() {
      return {
        temperature: this.poolInfoData.temperature,
        waterLevel: this.poolInfoData.waterLevel,
        ph: this.poolInfoData.ph,
        tds: this.poolInfoData.tds,
        turbidity: this.poolInfoData.turbidity
      }
    }
  },
  watch: {
    poolData() {
      this.initEcharts()
    }
  },
  methods: {
    initEcharts() {
      let myChart = echarts.init(document.getElementById("mix-chart" + this.id))

      // 监听屏幕变化自动缩放图表
      window.addEventListener('resize', function () {
        myChart.resize()
      })

      let data = [
        {
          name: '温度',
          value: this.poolData.temperature,
        },
        {
          name: 'PH值',
          value: this.poolData.ph,
        },
        {
          name: '浊度值',
          value: this.poolData.turbidity,
        },
        {
          name: 'TDS',
          value: this.poolData.tds,
        },
        {
          name: '游离余氯',
          value: this.poolInfoData.chlo
        }
      ]
      let getArrByKey = (data, k) => {
        let key = k || "value"
        let res = [];
        if (data) {
          data.forEach(function (t) {
            res.push(t[key]);
          });
        }
        return res;
      }
      // 因为数据不同，所以对显示数据进行处理
      let getChangeData = (data) => {
        let arr = [];
        for (let i = 0; i < data.length; i++) {
          // 0：温度 1：ph 2：浊度值 3：TDS
          switch (i) {
            case 0:
              arr.push({value: data[i].value})
              break
            case 1:
              arr.push({value: (data[i].value / 14) * 100})
              break
            case 2:
              arr.push({value: (data[i].value / 100)})
              break
            case 3:
              arr.push({value: data[i].value})
              break
            default:
              arr.push({value: data[i].value * 20})
          }
        }
        return arr
      }
      // 亮点数据
      let getSymbolData = (data) => {
        let arr = [];
        for (let i = 0; i < data.length; i++) {
          arr.push({
            value: data[i].value,
            symbolPosition: 'end'
          })
        }
        return arr
      }

      let option = {
        grid: {
          top: '10%',
          bottom: -2,
          left: -45,
          right: 5,
          containLabel: true
        },
        xAxis: {
          show: false
        },
        yAxis: [{
          triggerEvent: true,
          show: true,
          inverse: true,
          data: getArrByKey(data, 'name'),
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },

          axisLabel: {
            show: true,
            interval: 0,
            color: '#fff',
            align: 'left',
            margin: 60,
            formatter: function (value) {
              return '{title|' + value + '}'
            },
            rich: {
              title: {
                width: 50,
                align: 'right',
                fontSize: 12
              }
            }
          },
        }, {
          triggerEvent: true,
          show: true,
          inverse: true,
          data: getArrByKey(data, 'name'),
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            shadowOffsetX: '-20px',
            color: ['#fff'],
            align: 'left',
            verticalAlign: 'center',
            lineHeight: 20,
            fontSize: 12,
            formatter: function (value, index) {
              switch (index) {
                case 0:
                  return data[index].value + '℃'
                case 1:
                  if (data[index].value > 7) {
                    return '碱性'
                  } else if (data[index].value < 7) {
                    return '酸性'
                  } else if (data[index].value === 7) {
                    return '中性'
                  } else {
                    return '异常'
                  }
                case 2:
                  return data[index].value + 'FTU'
                case 3:
                  return data[index].value + 'ppm'
                case 4:
                  return data[index].value + 'mg/L'
                default:
                  return data[index].value + '%'
              }
            },
          }
        }],
        series: [{
          name: 'XXX',
          type: 'pictorialBar',
          symbol: 'image://',
          symbolSize: [80, 80],
          symbolOffset: [30, 0],
          z: 12,
          itemStyle: {
            normal: {
              color: '#fff',
            }
          },
          data: getSymbolData(getChangeData(data))
        }, {
          name: '条',
          type: 'bar',
          showBackground: true,
          yAxisIndex: 0,
          data: getChangeData(data),
          // 条状宽度
          barWidth: 10,
          // align: left,
          itemStyle: {
            normal: {
              color: "rgba(41, 162, 245, 1)",
              barBorderRadius: 10
            },
          },
        }]
      }

      myChart.setOption(option)
    }
  },
  mounted() {
    this.initEcharts()
  }
}
</script>

<style scoped>

</style>
